<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <div th:include="common.html"></div>
<script>
</script>
</head>

<div id="app" class="container-fluid">

    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
        <div id="demo" class="collapse">
            <button type="button" class="btn btn-success btn-round btn-sm"  style="margin-top: 10px"
                    @click="openAdd">
                <span class="glyphicon glyphicon-plus">添加用户</span>
            </button>
            <button type="button" class="btn btn-danger btn-round btn-sm"  style="margin-top: 10px"
                    @click="deleteDatas">
                <span class="glyphicon glyphicon-trash">批量删除用户</span>
            </button>
            <ul>
                <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入用户名查询！'></li>
                <li><button class="btn btn-primary btn-round btn-sm" type="button"  data-toggle="modal" data-target="#myModal2" >
                    <span class="glyphicon glyphicon-search" @click="selectData">查询用户</span>
                </button></li>
            </ul>
        </div>
    </div>

    <a-table
            style="padding-top: 30px;margin: auto;width: 1000px;"
            row-Key="id"
            :columns="columns"
            :data-source="dataSources"
            :pagination="pagination"
            :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :custom-Row="customRow"
            bordered
    >
         <span slot="action" slot-scope="record" style="width: 100px">
            <a-button size="small" type="primary"  @click.stop="openUpdate(record)">编辑</a-button>

             <a-button size="small" type="danger"  @click.stop="deleteData(record.id)">删除</a-button>
        </span>
    </a-table>

    <!--bootstrap的模态对话框-->
    <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="border-radius:15px;">
            <div class="modal-content">
                <div class="modal-header" style="background: #F45B4B;" >
                    <h4 class="text-white">{{modalTitle}}</h4>
                    <button type="button" class="close text-white" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" id="userAddForm">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="name" id="name" class="form-control" v-model="name">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="text" name="pass" id="pass" class="form-control" v-model="pass">
                        </div>
                        <div class="form-group">
                            <label >部门</label>
                            <div >
                                <template>
                                    <a-tree-select
                                            id="orgTree"
                                            v-model="orgids"
                                            show-search
                                            multiple
                                            style="width: 100%"
                                            tree-Node-Filter-Prop="title"
                                            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                            placeholder="请选择"
                                            :tree-data="treeData"
                                            tree-data-simple-mode
                                            allow-clear
                                            tree-default-expand-all
                                            @change="orgTreeChange"
                                    >
                                    </a-tree-select>
                                </template>
                            </div>
                        </div>




                            <div class="form-group">
                                <label >角色</label>
                                <div >
                                    <template>
                                        <a-tree-select
                                                id="roleTree"
                                                v-model="roleids"
                                                show-search
                                                multiple
                                                style="width: 100%"
                                                tree-Node-Filter-Prop="title"
                                                :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                                placeholder="请选择"
                                                :tree-data="roletreeData"
                                                tree-data-simple-mode
                                                allow-clear
                                                tree-default-expand-all
                                                @change="orgTreeChange"
                                        >
                                        </a-tree-select>
                                    </template>
                                </div>
                            </div>
                        <div class="form-group">
                            <label >职务</label>
                            <div >
                                <template>
                                    <a-tree-select
                                            id="postTree"
                                            v-model="postids"
                                            show-search
                                            multiple
                                            style="width: 100%"
                                            tree-Node-Filter-Prop="title"
                                            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                            placeholder="请选择"
                                            :tree-data="posttreeData"
                                            tree-data-simple-mode
                                            allow-clear
                                            tree-default-expand-all
                                            @change="orgTreeChange"
                                    >
                                    </a-tree-select>
                                </template>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>备注</label>
                            <textarea type="text" name="beizhu" id="beizhu" class="form-control" v-model="beizhu"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                    <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
                </div>
            </div>

        </div>

    </div>
</div>
<script th:src="@{/myjs/user/main.js}"></script>
</body>
</html>
